<template>
  <el-dialog
    class="daily_task"
    :model-value="modelValue"
    title="每日任务"
    style="width: 364px; height: auto !important"
    draggable
    :modal="false"
    :append-to-body="true"
    show
    @update:model-value="handleClose"
  >
    <template #header="{ close, titleId, titleClass }">
      <div class="custom_header">
        <span>每日任务</span>
      </div>
    </template>
    <div class="locked_content">
      <el-scrollbar>
        <div>
          <div v-for="i in 3" :key="i" class="list_item">
            <span>每日直播时长不少于4小时</span>
            <div style="display: inline-block; width: 80%">
              <el-progress :percentage="80" :format="format" />
            </div>
            <div
              style="
                font-size: 12px;
                height: 26px;
                background-color: #ffe5cc;
                display: inline-block;
                color: #3d3d3d;
                border-radius: 4px;
                padding: 0 10px;
                display: inline-block;
                line-height: 26px;
              "
            >
              未完成
            </div>
          </div>
        </div>

        <span class="month_task">月度任务</span>
        <div>
          <div v-for="i in 3" :key="i" class="list_item">
            <span>每月直播时长不低于 120 小时</span>
            <div style="display: inline-block; width: 80%">
              <el-progress :percentage="80" :format="format" />
            </div>
            <div
              style="
                font-size: 12px;
                height: 26px;
                background-color: #ffe5cc;
                display: inline-block;
                color: #3d3d3d;
                border-radius: 4px;
                padding: 0 10px;
                display: inline-block;
                line-height: 26px;
              "
            >
              未完成
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>
  </el-dialog>
</template>

<script setup>
import { defineProps, defineEmits } from "vue";

defineProps({
  modelValue: {
    // 接收父组件v-model传值
    type: Boolean,
    default: false,
  },
});
const emit = defineEmits(["update:modelValue"]);
const format = (percentage) => {
  let temp = percentage === 100 ? "Full" : `${percentage}%`;
  return temp;
};

const handleClose = () => {
  emit("update:modelValue", false);
};
</script>
<style lang="scss">
.daily_task {
  padding: 0;
  background-color: #222222;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 8px;

  .el-dialog__header {
    // border-bottom: 1px solid rgba(216, 216, 216, 0.5);
    padding: 20px 20px 10px 20px;
    height: 56px;
    font-weight: 500;
    font-size: 16px;
    color: #ffffff;
    line-height: 22px;
    text-align: left;
    font-style: normal;
    text-transform: none;

    .el-dialog__headerbtn {
      height: 56px;
    }
  }
  .locked_content {
    padding: 0 16px 16px 20px;
    color: #ffffff;
  }
  .month_task {
    margin-top: 20px;
    height: 35px;
    font-weight: 500;
    font-size: 16px;
    color: #ffffff;
    line-height: 22px;
    text-align: left;
    font-style: normal;
    text-transform: none;
    display: block;
  }
  .list_item {
    margin-bottom: 10px;
  }
}
</style>
